<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeNames = ref([])
defineOptions({
  name: 'docs'
})
onMounted(() => {
  console.log(activeNames.value, 999)
})
const goToDetail = id => {
  router.push({ path: '/docs/detail', query: { id } })
}
const copy = text => {
  navigator.clipboard.writeText(text)
  showToast('已复制用法')
}
const apiGroups = [
  {
    group: '组件相关',
    apis: [
      {
        id: 'BaseButton',
        name: 'BaseButton',
        desc: '主按钮组件，统一全局主按钮样式',
        usage: '<BaseButton>主要操作</BaseButton>',
        result: ''
      },
      {
        id: 'Tabbar',
        name: 'Tabbar',
        desc: '底部导航栏组件，自动路由切换',
        usage: '<Tabbar />',
        result: ''
      }
    ]
  },
  {
    group: '金额相关',
    apis: [
      {
        id: 'isValidAmount',
        name: 'isValidAmount',
        desc: '判断是否是合法的金额',
        usage: "isValidAmount('123.45')",
        result: 'true/false'
      },
      {
        id: 'formatAmount',
        name: 'formatAmount',
        desc: '金额格式化，千分位加逗号',
        usage: 'formatAmount(1234567.89)',
        result: '1,234,567.89'
      },
      {
        id: 'parseAmount',
        name: 'parseAmount',
        desc: '带千分位金额转数字',
        usage: "parseAmount('1,234,567.89')",
        result: '1234567.89'
      },
      {
        id: 'toFixedAmount',
        name: 'toFixedAmount',
        desc: '金额保留小数位（不加千分位）',
        usage: "toFixedAmount('1234.567', 2)",
        result: '1234.57'
      },
      {
        id: 'amountToChinese',
        name: 'amountToChinese',
        desc: '金额转中文大写',
        usage: 'amountToChinese(1234.56)',
        result: '壹仟贰佰叁拾肆元伍角陆分'
      }
    ]
  },
  {
    group: '时间相关',
    apis: [
      {
        id: 'getNow',
        name: 'getNow',
        desc: '获取当前时间',
        usage: 'getNow()',
        result: '2025-05-19 14:35:22'
      },
      {
        id: 'formatTime',
        name: 'formatTime',
        desc: '格式化时间',
        usage: "formatTime('2025-05-19T10:00:00', 'YYYY年MM月DD日 HH:mm')",
        result: '2025年05月19日 10:00'
      },
      {
        id: 'fromNow',
        name: 'fromNow',
        desc: '多久以前',
        usage: "fromNow('2025-05-18T15:00:00')",
        result: '23小时前'
      },
      {
        id: 'isAfter',
        name: 'isAfter',
        desc: '是否在某个时间之后',
        usage: "isAfter('2025-05-20', '2025-05-19')",
        result: 'true/false'
      },
      {
        id: 'isBefore',
        name: 'isBefore',
        desc: '是否在某个时间之前',
        usage: "isBefore('2025-05-18', '2025-05-19')",
        result: 'true/false'
      },
      {
        id: 'getDuration',
        name: 'getDuration',
        desc: '获取两个时间的持续时间',
        usage: "getDuration('2025-05-18 10:00', '2025-05-18 12:30')",
        result: '{ hours: 2, minutes: 30, ... }'
      },
      {
        id: 'getDurationText',
        name: 'getDurationText',
        desc: '获取两个时间的具体差距',
        usage: "getDurationText('2025-05-18 10:00', '2025-05-18 12:16:30')",
        result: '2小时 16分钟 30秒'
      }
    ]
  },
  {
    group: '加密相关',
    apis: [
      {
        id: 'md5EncryptWithSalt',
        name: 'md5EncryptWithSalt',
        desc: '对密码进行加盐 MD5 加密',
        usage: "md5EncryptWithSalt('123456')",
        result: 'e10adc3949ba59abbe56e057f20f883e（示例）'
      }
    ]
  },
  {
    group: '本地存储',
    apis: [
      {
        id: 'secureStorage_set',
        name: 'secureStorage.set',
        desc: '加密存储本地数据',
        usage: "secureStorage.set('token', 'abc123')",
        result: '本地已加密存储'
      },
      {
        id: 'secureStorage_get',
        name: 'secureStorage.get',
        desc: '获取本地加密存储的数据',
        usage: "secureStorage.get('token')",
        result: 'abc123'
      },
      {
        id: 'secureStorage_remove',
        name: 'secureStorage.remove',
        desc: '移除本地加密存储的数据',
        usage: "secureStorage.remove('token')",
        result: '本地已移除该数据'
      },
      {
        id: 'secureStorage_clear',
        name: 'secureStorage.clear',
        desc: '清空所有本地加密存储的数据',
        usage: 'secureStorage.clear()',
        result: '本地所有加密数据已清空'
      }
    ]
  },
  {
    group: '请求相关',
    apis: [
      {
        id: 'useGet',
        name: 'useGet',
        desc: 'GET 请求封装，支持参数',
        usage: 'useGet(url, options)',
        result: '返回 useRequest 实例'
      },
      {
        id: 'usePost',
        name: 'usePost',
        desc: 'POST 请求封装，支持 body',
        usage: 'usePost(url, options)',
        result: '返回 useRequest 实例'
      },
      {
        id: 'usePut',
        name: 'usePut',
        desc: 'PUT 请求封装',
        usage: 'usePut(url, options)',
        result: '返回 useRequest 实例'
      },
      {
        id: 'useDelete',
        name: 'useDelete',
        desc: 'DELETE 请求封装',
        usage: 'useDelete(url, options)',
        result: '返回 useRequest 实例'
      },
      {
        id: 'useUpload',
        name: 'useUpload',
        desc: '文件上传封装',
        usage: 'useUpload(url, file, formDataKey, extraData)',
        result: '返回 useRequest 实例'
      }
    ]
  }
]
</script>

<template>
  <div class="bg-gray-100 bg-white">
    <div class="p-4 space-y-8">
      <div class="text-xl font-bold mb-4">项目文档</div>
      <div class="bg-white rounded-xl p-6 shadow text-gray-700 mb-6">
        <p>这里将展示本项目的使用说明、开发文档和相关链接。</p>
        <p class="mt-2 text-sm text-gray-400">（文档内容请在此补充）</p>
      </div>
      <div class="text-lg font-bold mb-2">API/工具方法用法</div>
      <van-collapse v-model="activeNames">
        <van-collapse-item
          v-for="group in apiGroups"
          :key="group.group"
          :title="group.group"
          :name="group.group"
        >
          <van-cell-group>
            <van-cell
              v-for="api in group.apis"
              :key="api.name"
              :title="api.name"
              :label="api.desc"
              is-link
              @click="goToDetail(api.id)"
            >
              <template #right-icon>
                <span
                  class="i-carbon-copy text-lg text-gray-400 ml-2 cursor-pointer hover:text-blue-500"
                  @click.stop="copy(api.usage)"
                  title=""
                />
              </template>
            </van-cell>
          </van-cell-group>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<route>
  {
    path: '/docs',
    name: 'docs',
    meta: {
      title: '文档',
      keepAlive: true,
      showNavBar: true,
    }
  }
</route>
